<template>
  <div class="container">
    <div id="app"></div>
    <canvas id="deck-canvas"></canvas>
  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
// import { MVTLayer } from '@deck.gl/geo-layers';
import { GridLayer } from '@deck.gl/aggregation-layers';
import { MapboxLayer } from '@deck.gl/mapbox';
import axios from 'axios';

/**
 * 使用 deck 画 geojson 网格
 */

export default {
  data() {
    return {
      // 历史数据
      historyData: null,
      // map 地图对象实例
      map: null,
    };
  },
  mounted() {
    this._createBaseMap();
  },
  methods: {
    _createBaseMap() {
      mapboxgl.accessToken =
        'pk.eyJ1IjoiaW54bG54IiwiYSI6ImNsMzRmZDE4dTBhOWczaWs3a2psanphMnUifQ.iKIlYhNlW_13OqBJLOc9sw';
      const map = new mapboxgl.Map({
        container: 'app',
        //自己绘制的样式地图令牌
        antialias: true, //抗锯齿
        style: 'mapbox://styles/mapbox/dark-v10',
        center: [113.97923191113188, 22.589860256941634],
        zoom: 12,
      });

      map.on('load', function () {
        axios.get('http://192.168.101.147:8081/protobf1/500000').then((r) => {
          const { data } = r;
          console.log('原始数据 :>> ', data);
          console.log('数据总量 :>> ', data.length);
          const handleData = data.map((item) => {
            return { COORDINATES: [item.jd, item.wd], ad2: item.ad_2 };
          });
          console.log('处理后的数据 :>> ', handleData);
          window.handleData = handleData;

          const gridLayer = new MapboxLayer({
            type: GridLayer,
            id: 'grid-layer',
            data: handleData,
            cellSize: 10,
            // elevationScale: 0,
            // highlightColor: [0, 0, 128, 255],
            extruded: false, // 不启用单元格提升
            pickable: true,
            getPosition: (d) => d.COORDINATES,
            onClick: (info) => {
              console.log('info :>> ', info);
            },
            // colorAggregation: 'SUM',
            // getPointRadius: (f) => 11 - f.properties.scalerank,
            // getFillColor: [255, 123, 0, 255],
            gpuAggregation: true,
          });
          console.log(gridLayer, '51561');
          map.addLayer(gridLayer);
        });
      });

      this.map = map;
      window.map = map;
      window.addGridLayer = this.addGridLayer.bind(this);

      // zoom变化时打印zoom值
      map.on('zoom', function (e) {
        console.log('zoom :>> ', e.target.getZoom());
      });
    },

    addGridLayer(data, cellSize = 50) {
      if (this.map.getLayer('grid-layer')) {
        this.map.removeLayer('grid-layer');
      }
      const gridLayer = new MapboxLayer({
        type: GridLayer,
        id: 'grid-layer',
        data,
        // data: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
        cellSize,
        // elevationScale: 0,
        // highlightColor: [0, 0, 128, 255],
        extruded: false, // 不启用单元格提升
        pickable: true,
        getPosition: (d) => d.COORDINATES,
        onClick: (info) => {
          console.log('info :>> ', info);
        },
        // colorAggregation: 'SUM',
        // getPointRadius: (f) => 11 - f.properties.scalerank,
        // getFillColor: [255, 123, 0, 255],
        gpuAggregation: true,
      });

      this.map.addLayer(gridLayer);
      console.log('gridLayer :>> ', gridLayer);
    },
  },
};
</script>

<style>
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#app {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}

/* 将底部的logo和信息声明隐藏 */
.mapboxgl-ctrl-logo {
  display: none !important;
}
.mapboxgl-ctrl-bottom-right {
  display: none !important;
}

/* 弹出层样式 */
.mapboxgl-popup {
  padding-bottom: 5px;
}
/* 控制关闭按钮 */
.mapboxgl-popup-close-button {
  /* display: none; */
}
</style>
